import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, Swiper, SwiperItem, Image, ScrollView} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {
  set_userinfo, set_cart, set_goodslist, set_viplist, set_bind_car_num, set_progress,
  set_pushdata, set_pushdatanum, gohome_btn, set_cart_num,
} from '../../actions/IndexAction'
import base from "../base"
import { AtModal, AtModalHeader, AtModalContent, AtModalAction,AtInput} from 'taro-ui'
import './index.less'
import set from "../../apis/api"

class add_devices extends Component {
  constructor(props) {
    super(props)
    base(this)
    this.state = {
      current: 0,
      value:"",
      dev_sn:'',
      showinput:false
    }
  }

  config = {
    navigationBarTitleText: '添加设备',
    enablePullDownRefresh: true,
    navigationBarBackgroundColor: "#4bb33d",
    navigationBarTextStyle: "white"

  }
  handleChange(val)
  {
    this.setState({
      dev_sn:val
    })
  }
  onReachBottom() {


  }
  toSubSeVice()
  {
    if(!this.state.dev_sn)
    {
        wx.showToast({
          title: '请输入或扫描条码',
          icon: 'none',
          duration: 1800
        })
      return;
    }
    this.hideCode();
    Taro.navigateTo({
      url: '/pages/gypage/devices_set?id='+this.$router.params.id+"&sn="+this.$router.params.sn+"&dev_sn="+this.state.dev_sn
    })
  }
  inputCode()
  {
    this.setState({
      showinput:true
    })
  }
  hideCode()
  {
    this.setState({
      showinput:false
    })
  }
  scan() {

    var that=this
    wx.scanCode({
      success: (res) => {
        console.log("扫码结果");
        console.log(res);
        that.setState({
          dev_sn: res.result
        },()=>{
          this.toSubSeVice();
        })
      },
      fail: (res) => {
        console.log(res);
      }
    })
  }

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  onPullDownRefresh() {
    wx.stopPullDownRefresh();
  }

  componentWillUnmount() {
  }

  componentDidShow() {
    this.onPullDownRefresh()


  }

  back() {
    Taro.navigateBack()
  }

  fetchData() {


    // wx.showLoading({title: "加载中"})
    // var databody={
    //   openid:this.props.wxuser.wxuser.openid,
    //   id:this.$router.params.id
    // }
    // this.wx_request(set.oto.getotoorder, databody,"POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((data)=>
    // {
    //
    //
    //   wx.stopPullDownRefresh();
    //   wx.hideLoading();
    //
    // }).catch((err)=>{
    //   wx.hideLoading();
    //   wx.stopPullDownRefresh();
    //   wx.showToast({
    //     title: '网络访问失败，请重试',
    //     icon: 'none',
    //     duration: 1800
    //   })
    // })

  }

  componentDidHide() {
  }

  render() {
    return (
      <View style={{flex:1,alignItems:"center",display:"flex",flexDirection:"column"}}>
        <View style={{paddingLeft:"10px",backgroundImage:`url("http://wx.engconn.com/static/uploads/2020-01-11/344201578679999.png")`,backgroundRepeat:"no-repeat",backgroundSize:"100% 100%",width:"200rpx",height:"200rpx",marginTop:"50rpx"}}>


        </View>

        <View style={{margin:"30rpx",display:"flex",alignItems:"center",justifyContent:"center"}}>
          <Text style={{color:"#999999",fontSize:"24rpx"}}>
            请扫描验证设备信息
          </Text>

        </View>

        <View style={{margin:"30rpx",display:"flex",alignItems:"center",justifyContent:"center"}}>

          <View onClick={this.scan.bind(this)} style={{width:"400rpx",height:"70rpx",borderRadius:"35rpx",backgroundColor:"#4bb33d",  alignItems: "center",
            justifyContent: "center",display:"flex",flex:1}}>
            <Text style={{color: "#ffffff", fontSize: "26rpx"}}>立即扫码</Text>
          </View>

        </View>
        <View style={{margin:"30rpx",display:"flex",alignItems:"center",justifyContent:"center"}}>

          <View onClick={this.inputCode.bind(this)} style={{width:"400rpx",height:"70rpx",borderRadius:"35rpx", alignItems: "center",border:"solid #cccccc 2rpx",
            justifyContent: "center",display:"flex",flex:1}}>
            <Text style={{color: "#999999", fontSize: "26rpx"}}>手工输入</Text>
          </View>

        </View>
        {this.state.showinput&&<AtModal isOpened={this.state.showinput}>
          <AtModalHeader>输入条码</AtModalHeader>
          <AtModalContent>
            <AtInput
              type='text'
              placeholder='请输入条码'
              value={this.state.dev_sn}
              onChange={this.handleChange.bind(this)}
            />
          </AtModalContent>
          <AtModalAction> <Button onClick={this.hideCode.bind(this)}>取消</Button> <Button onClick={this.toSubSeVice.bind(this)}>确定</Button> </AtModalAction>
        </AtModal>}
      </View>
    )
  }
}

const mapstate = state => {
  return {
    userinfo: state.usermodel,
    cart_num: state.cart_num,
    cart: state.cart,
    goodslist: state.goodslist,
    vip: state.vip,
    progress: state.progress,
    pushdata: state.pushdata,
    wxuser: state.wxusermodel,sys_config:state.sys_config
  }
}
export default connect(mapstate)(add_devices)

